<template>
  <div class="search-result">
    <div class="search-header">
      <h2>搜索结果：{{ keyword }}</h2>
      <p class="result-count">共找到 {{ total }} 个相关API</p>
    </div>

    <!-- API列表 -->
    <div class="api-list" v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="8" v-for="api in apiList" :key="api.id">
          <el-card class="api-card" shadow="hover">
            <div class="api-header">
              <span class="api-title">{{ api.name }}</span>
              <el-tag size="small" :type="api.status === '1' ? 'success' : 'info'" effect="plain">
                {{ api.status === '1' ? '运行中' : '维护中' }}
              </el-tag>
            </div>
            <div class="api-desc">{{ api.description }}</div>
            <div class="api-meta">
              <span class="api-calls">
                <i class="el-icon-view"></i>
                {{ formatNumber(api.callCount) }}次调用
              </span>
              <span class="api-type">{{ api.method || 'GET' }}</span>
            </div>
            <div class="api-footer">
              <el-button type="text" @click="viewApiDetail(api.id)">
                <i class="el-icon-document"></i> 接口文档
              </el-button>
              <el-button type="primary" size="small" @click="viewApiDetail(api.id)">立即调用</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <div class="pagination-container" v-if="total > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[12, 24, 36, 48]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      <!-- 无数据提示 -->
      <el-empty v-if="total === 0" description="暂无相关API"></el-empty>
    </div>
  </div>
</template>

<script>
import { listApis } from '@/api/front'

export default {
  name: 'ApiSearch',
  data() {
    return {
      loading: false,
      keyword: '',
      total: 0,
      apiList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        keyword: ''
      }
    }
  },
  created() {
    this.keyword = this.$route.query.keyword
    this.queryParams.keyword = this.keyword
    this.getList()
  },
  watch: {
    '$route.query.keyword': {
      handler(newVal) {
        this.keyword = newVal
        this.queryParams.keyword = newVal
        this.queryParams.pageNum = 1
        this.getList()
      }
    }
  },
  methods: {
    // 获取API列表
    getList() {
      this.loading = true
      listApis(this.queryParams).then(response => {
        this.apiList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.loading = false
        this.$message.error('获取数据失败')
      })
    },
    // 格式化数字
    formatNumber(num) {
      return num >= 10000 ? (num/10000).toFixed(1) + 'w' : num
    },
    // 查看API详情
    viewApiDetail(id) {
      this.$router.push(`/front/detail/${id}`)
    },
    // 处理分页大小变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    // 处理页码变化
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-result {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;

  .search-header {
    margin-bottom: 30px;

    h2 {
      margin: 0 0 12px 0;
      font-size: 24px;
      color: #303133;
    }

    .result-count {
      margin: 0;
      color: #909399;
      font-size: 14px;
    }
  }

  .api-list {
    .api-card {
      margin-bottom: 24px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }

      .api-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .api-title {
          font-size: 16px;
          font-weight: bold;
          color: #303133;
        }
      }

      .api-desc {
        color: #666;
        margin-bottom: 16px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .api-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        font-size: 13px;
        color: #909399;
      }

      .api-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 12px;
        border-top: 1px solid #f0f0f0;
      }
    }
  }

  .pagination-container {
    text-align: center;
    margin-top: 40px;
  }
}
</style> 